import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  const [sleepSchedule, setSleepSchedule] = useState(50);
  const [riskAttitude, setRiskAttitude] = useState('');
  const [socialInitiative, setSocialInitiative] = useState('');
  const [emotionalExpression, setEmotionalExpression] = useState('');
  const [activities, setActivities] = useState<string[]>([]);
  const [otherActivity, setOtherActivity] = useState('');
  
  const isFormComplete = () => {
    return riskAttitude && socialInitiative && emotionalExpression && activities.length > 0;
  };

  const handleComplete = () => {
    if (isFormComplete()) {
      navigate('/info');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-3xl shadow-xl p-8 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
        <h1 className="text-2xl font-bold mb-2">生活习惯与性格偏好</h1>
        <p className="text-gray-500 mb-8">让我们更了解你的日常生活方式</p>

        <div className="space-y-8">
          {/* 作息时间滑块 */}
          <div>
            <h2 className="text-lg font-medium mb-4">1. 你更偏好的作息时间是？</h2>
            <div className="relative">
              <input
                type="range"
                min="0"
                max="100"
                value={sleepSchedule}
                onChange={(e) => setSleepSchedule(Number(e.target.value))}
                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
              />
              <div className="flex justify-between text-sm text-gray-600 mt-2">
                <span>早起型</span>
                <span>夜猫型</span>
              </div>
            </div>
          </div>

          {/* 风险态度 */}
          <div>
            <h2 className="text-lg font-medium mb-4">2. 面对新事物，你的态度？</h2>
            <div className="space-y-3">
              {[
                { id: 'adventurous', title: '兴奋且愿意尝试', subtitle: '哪怕有风险也不介意 (冒险型)' },
                { id: 'cautious', title: '更喜欢稳妥可控', subtitle: '倾向选择安全方案 (保守型)' }
              ].map((option) => (
                <button
                  key={option.id}
                  onClick={() => setRiskAttitude(option.id)}
                  className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
                    riskAttitude === option.id
                      ? 'border-pink-400 bg-pink-50'
                      : 'border-gray-200 hover:border-pink-200'
                  }`}
                >
                  <p className="font-medium">{option.title}</p>
                  <p className="text-sm text-gray-500">{option.subtitle}</p>
                </button>
              ))}
            </div>
          </div>

          {/* 社交主动度 */}
          <div>
            <h2 className="text-lg font-medium mb-4">3. 在一个陌生群体里，你会？</h2>
            <div className="space-y-3">
              {[
                { id: 'proactive', title: '很快找人聊天', subtitle: '主动介绍自己 (主动社交)' },
                { id: 'passive', title: '等别人来找你', subtitle: '先观察一阵子 (被动社交)' }
              ].map((option) => (
                <button
                  key={option.id}
                  onClick={() => setSocialInitiative(option.id)}
                  className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
                    socialInitiative === option.id
                      ? 'border-pink-400 bg-pink-50'
                      : 'border-gray-200 hover:border-pink-200'
                  }`}
                >
                  <p className="font-medium">{option.title}</p>
                  <p className="text-sm text-gray-500">{option.subtitle}</p>
                </button>
              ))}
            </div>
          </div>

          {/* 情绪表达 */}
          <div>
            <h2 className="text-lg font-medium mb-4">4. 遇到挫折时，你通常会？</h2>
            <div className="space-y-3">
              {[
                { id: 'expressive', title: '大方地表达出来', subtitle: '需要陪伴、鼓励 (外放型)' },
                { id: 'reserved', title: '倾向自己独自消化', subtitle: '不轻易向外界透露 (内敛型)' }
              ].map((option) => (
                <button
                  key={option.id}
                  onClick={() => setEmotionalExpression(option.id)}
                  className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
                    emotionalExpression === option.id
                      ? 'border-pink-400 bg-pink-50'
                      : 'border-gray-200 hover:border-pink-200'
                  }`}
                >
                  <p className="font-medium">{option.title}</p>
                  <p className="text-sm text-gray-500">{option.subtitle}</p>
                </button>
              ))}
            </div>
          </div>

          {/* 兴趣活动 */}
          <div>
            <h2 className="text-lg font-medium mb-4">5. 你更喜欢哪类活动？（可多选）</h2>
            <div className="flex flex-wrap gap-3 mb-4">
              {[
                { category: 'outdoor', items: ['户外运动', '旅行', '极限挑战'] },
                { category: 'indoor', items: ['宅家', '看书', '手工', '动漫'] },
                { category: 'social', items: ['聚会', 'KTV', '逛街', '看电影'] }
              ].map(group => (
                group.items.map(activity => (
                  <button
                    key={activity}
                    onClick={() => setActivities(prev => 
                      prev.includes(activity)
                        ? prev.filter(a => a !== activity)
                        : [...prev, activity]
                    )}
                    className={`px-4 py-2 rounded-full border transition-all ${
                      activities.includes(activity)
                        ? 'border-pink-400 bg-pink-50 text-pink-600'
                        : 'border-pink-200 hover:border-pink-400'
                    }`}
                  >
                    {activity}
                  </button>
                ))
              ))}
            </div>
            <div className="mt-4">
              <input
                type="text"
                placeholder="其他活动..."
                value={otherActivity}
                onChange={(e) => setOtherActivity(e.target.value)}
                className="w-full px-4 py-2 rounded-xl border-2 border-gray-200 focus:border-pink-400 outline-none"
              />
            </div>
          </div>
        </div>

        <div className="flex justify-between mt-8">
          <button className="px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700">
            返回
          </button>
          <button
            disabled={!isFormComplete()}
            onClick={handleComplete}
            className={`px-6 py-2 rounded-full transition-all ${
              isFormComplete()
                ? 'bg-pink-400 hover:bg-pink-500 text-white'
                : 'bg-gray-200 text-gray-400 cursor-not-allowed'
            }`}
          >
            完成测评
          </button>
        </div>
      </div>
    </div>
  );
}

export default App;